import React from 'react';
import { connect } from 'react-redux';
import {countAdd, countDel, countSet} from '@/store/example/action';
import { bindActionCreators } from 'redux';
import './example.less'

//引入子组件
import List from './components/List.jsx'

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    handleAdd(e){
        this.props.countAdd()
    }
    handleDel(e){
        this.props.countDel()
    }
    handleChange(e){
        this.props.countSet(e.target.value)
    }
    render() {
        return (<>
            <h2> 我是Example </h2>
            <div className="dv"></div>
            <button onClick={this.handleAdd.bind(this)}>增加</button>
            <button onClick={this.handleDel.bind(this)}>删除</button>
            <input type="text" value={  this.props.count  }  onChange={this.handleChange.bind(this)}/>

            <List/>

        </>)
    }
}



// 以下  是react-redux  API的使用测试...
function mapStateToProps(state) {
    //console.log(state);
    //console.log({ count: state.exampleRepertory.count });
    return { count: state.exampleRepertory.count }
}

function mapDispatchToProps(dispatch) {
    return {
        countAdd: bindActionCreators(countAdd, dispatch),
        countDel: bindActionCreators(countDel, dispatch),
        countSet: bindActionCreators(countSet, dispatch),
    }
}

// 合并属性  这个可以不写,直接使用默认值
function mergeProps(stateProps, dispatchProps, ownProps) {
    return Object.assign({},stateProps, ownProps, dispatchProps)
}

//基本不会使用的
const options = {};


export default connect(
    mapStateToProps,
    mapDispatchToProps,
    mergeProps,
    options
)(Example);


//
// export default connect(state =>({ count: state.exampleRepertory.count }), {
//     countAdd,
//     countDel,
//     countSet,
// })(Example);
